<template>
	<view class="supermarket-cart">
		<uni-popup type="bottom" ref="cartRef" background-color="#fff" :is-mask-click="isMaskClick">
			<scroll-view scroll-y="true" class="cart-list" :style="{'height':windowHeight + 'px'}">
				<view class="cart-item" :class="{not_buy:!item.can_buy}" v-if="cartList.length > 0"
					v-for="(item, index) in cartList" :key="index">
					<image :src="item.goods_logo" width="120" height="120"></image>
					<view class="info">
						<view class="name" :class="{decoration:!item.can_buy}" style="width:500rpx">
							{{ (item.error ?(item.error + '--'): '') + item.goods_name + (item.spec_key_name?'-' + (item.spec_key_name || ''):'')  }}
						</view>
						<view v-if="!item.can_buy" style="color: red !important;">{{item.error}}</view>
						<view class="other">
							<view class="price-group">
								<text class="price" style="font-size: 24rpx;" v-if="item.is_seckill">秒杀价</text>
								<text class="price">￥{{ item.sale_price || 0 }}</text>
							</view>
							<!-- <cart-control v-if="item.can_buy" @add-cart="addCart" @reduce-cart="reduceCart"
									:index="index" :goods="item" :num="num"></cart-control> -->
							<view v-if="!item.can_buy" size="mini" @click="removeCart(item.id)">移出</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<c-empty v-if="cartList.length < 1"></c-empty>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue';
	defineOptions({
		name: 'supermarket-cart'
	});

	let cartRef = ref(null);

	const props = defineProps({
		cartList: {
			type: [Array, Object],
			default: () => { //定义默认值
				return []
			}
		},
		cartTotalNumber: {
			type: Number,
			default: () => { //定义默认值
				return 0
			}
		},
		windowHeight: {
			type: [String, Number],
			default: () => '500rpx'
		},
		isMaskClick: {
			type: Boolean,
			default: true
		},
	})

	function close() {
		cartRef.value.close();
	}

	function open() {
		cartRef.value.open();
	}

	defineExpose({
		close,
		open
	});
</script>

<style lang="scss">
	.supermarket-cart {
		.cart-list {
			padding: 0 $m24;

			.not_buy {
				filter: grayscale(100%);
			}

			.cart-item {
				display: flex;
				flex-direction: row;
				padding: $m20 0;

				.info {
					display: flex;
					flex-direction: column;
					overflow: hidden;
					width: 100%;
					margin-left: $m24;

					.name {}

					.decoration {
						text-decoration: line-through;
					}

					.other {
						width: 90%;
						@include f-between;

						.price {
							color: $u-type-error;
						}
					}
				}
			}
		}
	}
</style>